province = function(value, div, name, opt, addr) {
	if(typeof(opt) == 'undefined') opt='';	
	if(typeof(name) == 'undefined') name='';
	if(typeof(addr) == 'undefined') addr='';
	$.getJSON(
		HOST_FRONTEND + 'ajax/location?callback=?',		
		{type:1,value:value,optall:opt,name:name,addr:addr},
		function(response) {		
			if(response['data'] != '') {				
				$('#'+div).html(response['data']).show();
			}
		}
	);
}
district = function(action, value, div, name, opt, addr) {	
	if(typeof(opt) == 'undefined') opt='';	
	if(typeof(name) == 'undefined') name='';
	if(typeof(addr) == 'undefined') addr='';
	$.getJSON(
		HOST_FRONTEND + 'ajax/location?callback=?',
		{type:2,value:value,optall:opt,name:name,addr:addr,action:action},
		function(response) {	
			if(response['data'] != '') {
				$('#'+div).html(response['data']).show();
			}			
		}
	);
}
map = function(mapCanvas, type, opt) {	
	mapCanvas.gmap({'callback': function(evt, map) {
		var self = this;
		var lat  = 10.772361;
		var lng  = 106.657847;
		self.set('clientPosition', new google.maps.LatLng(lat, lng));	
		if(type == 1) {
			self.getCurrentPosition(function(position, status) {					
				if ( status === 'OK' ) {
					lat = position.coords.latitude;
					lng = position.coords.longitude;
					self.set('clientPosition', new google.maps.LatLng(lat, lng));
					self.addMarker({'position': self.get('clientPosition'), 'bounds': true});
					self.addShape('Circle', { 'strokeWeight': 0, 'fillColor': "#008595", 'fillOpacity': 0.25, 'center': self.get('clientPosition'), 'radius': 7, clickable: false });
					
				}					
			}); 
			opt = {lat:lat,lng:lng};
		} else {
			self.addMarker({'position': self.get('clientPosition'), 'bounds': true});
		}
		$.getJSON(
			HOST_FRONTEND + 'ajax/map?type='+type+'&callback=?',
			opt, 
			function(data) {				
				var myOptions = {
					content: 'Đang tải dữ liệu ... Bạn vui lòng chờ trong giây lát!',
					disableAutoPan: false,
					maxWidth: 0,
					zIndex:null,
					pixelOffset: new google.maps.Size(-140, 0),
					closeBoxMargin: '9px',
					closeBoxURL: HOST_SIMG + 'map/close.gif',
					infoBoxClearance: new google.maps.Size(1, 1),
					isHidden: false,
					pane: 'floatPane',
					enableEventPropagation: false,
					boxClass: 'info-box'
				};
				//infoBubble = new InfoBox(myOptions);
				$('ul#listResult').html('');
				$.each( data.results, function(i, marker) {
					var id	 	  = marker.id + '_' + marker.type;	
					/**template li*/
					var template  = marker.tpl_item;							
					/**template infobox*/
					var infobox	  = marker.tpl_info_box;
					$('<li/>')
					.attr('id','im_' + id)
					.html(template)
					.appendTo('ul#listResult');
					self.addMarker({ 
							'position': new google.maps.LatLng(marker.lat, marker.lng), 
							'bounds': true ,
							'icon': HOST_SIMG + 'map/' + marker.type + '.png',
							'title': marker.name,
							'id': id
						},function(map, marker){								
							$('li#im_' + id).click( function() {								
								$(marker).triggerEvent('click');
								return false;
							});
							// make the map pan to the marker position on mouseover event
							$('li#im_' + id).click(function() {
								map.panTo(marker.getPosition());
							});
					}).click(function() {							
						if(!self.get('ib')){self.set('ib',new InfoBox());}
						var ib = self.get('ib');
						ib.setOptions(myOptions);
						ib.setContent(infobox);
						ib.open(self.get('map'),this);						
						/*$('ul#listResult', document).animate({
							scrollTop: $('li#im_' + id).offset().top
						}, 2000);*/
					});				
				});				
			}
		); 
		// end load json map
	}});	
}